<template>
  <div class="page">
    <div class="information">
      <div class="tips">
        <div class="tips_1"></div>
        <div class="tips_2">完善简历</div>
      </div>
      <div class="steps">
        <div class="steps_item active_steps_item">
          <div class="steps_item_1">1</div>
          <div class="steps_item_2">基本信息</div>
        </div>
        <div class="item_line">
          <div class="item_line_1"></div>
        </div>
        <div class="steps_item">
          <div class="steps_item_1">2</div>
          <div class="steps_item_2">详细信息</div>
        </div>
        <div class="item_line">
          <div class="item_line_1"></div>
        </div>
        <div class="steps_item">
          <div class="steps_item_1">3</div>
          <div class="steps_item_2">保存成功</div>
        </div>
      </div>
      <div class="form_container">
        <div class="head">
          <div class="head_le">个人头像</div>
          <div class="head_ri">
            <img src="../../assets/login/11.png" alt="" />
            <img class="head_ri_icon" src="../../assets/login/12.png" alt="" />
          </div>
        </div>
        <div class="input_item">
          <div class="input_item_le">
            <span class="input_item_le_1">*</span>
            <span>姓名</span>
          </div>
          <div class="input_item_ri">
            <el-input
              v-model="name"
              placeholder="请输入真实姓名"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="14"
            />
          </div>
        </div>
        <div class="select_1">
          <div class="select_1_le">
            <span class="select_1_le_1">*</span>
            <span>性别</span>
          </div>
          <div class="select_1_ri">
            <div class="select_1_item">
              <img src="../../assets/default/3.png" alt="" />
              <span>男</span>
            </div>
            <div class="select_1_item">
              <img src="../../assets/default/4.png" alt="" />
              <span>女</span>
            </div>
          </div>
        </div>
        <div class="select_item">
          <div class="select_item_le">
            <span class="select_item_le_1">*</span>
            <span>出生日期</span>
          </div>
          <div class="select_item_ri">
            <el-date-picker
              v-model="date"
              :clearable="false"
              class="picker_popper"
              type="date"
              size="small"
              placeholder="请选择出生日期"
            />
            <img src="../../assets/login/13.png" alt="" />
          </div>
        </div>
        <div class="input_item">
          <div class="input_item_le">
            <span class="input_item_le_1">*</span>
            <span>手机号</span>
          </div>
          <div class="input_item_ri">
            <el-input
              v-model="name"
              placeholder="请输入"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="14"
            />
          </div>
        </div>
        <div class="select_1">
          <div class="select_2_le">
            <span class="select_2_le_1">*</span>
            <span>是否需要提供就业推荐服务</span>
            <span class="select_2_le_2">（收费项目）</span>
          </div>
          <div class="select_1_ri">
            <div class="select_1_item">
              <img src="../../assets/default/3.png" alt="" />
              <span>是</span>
            </div>
            <div class="select_1_item">
              <img src="../../assets/default/4.png" alt="" />
              <span>否</span>
            </div>
          </div>
        </div>

        <div class="input_select">
            <div class="input_select_le">
                <span class="input_select_le_1">*</span>
                <span>学历</span>
            </div>
            <div class="input_select_ri">
                <el-select
                    v-model="selectValue"
                    placeholder-style="color:#bfbfbf;font-size:7px;"
                    placeholder="请选择" >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>

        <div class="input_item">
          <div class="input_item_le">
            <span class="input_item_le_1">*</span>
            <span>身高</span>
          </div>
          <div class="input_item_ri">
            <el-input
              v-model="name"
              placeholder="请输入"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="14"
            />
          </div>
        </div>
        <div class="input_item">
          <div class="input_item_le">
            <span class="input_item_le_1">*</span>
            <span>体重</span>
          </div>
          <div class="input_item_ri">
            <el-input
              v-model="name"
              placeholder="请输入"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="14"
            />
          </div>
        </div>

        <div class="select_1">
          <div class="select_1_le">
            <span class="select_1_le_1">*</span>
            <span>婚否</span>
          </div>
          <div class="select_1_ri">
            <div class="select_1_item">
              <img src="../../assets/default/3.png" alt="" />
              <span>未婚</span>
            </div>
            <div class="select_1_item">
              <img src="../../assets/default/4.png" alt="" />
              <span>已婚</span>
            </div>
          </div>
        </div>
        <div class="input_item">
          <div class="input_item_le">
            <span class="input_item_le_1">*</span>
            <span>籍贯</span>
          </div>
          <div class="input_item_ri">
            <el-input
              v-model="name"
              placeholder="请输入"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="14"
            />
          </div>
        </div>

        <div class="input_select">
            <div class="input_select_le">
                <span class="input_select_le_1">*</span>
                <span>现居地</span>
            </div>
            <div class="input_select_le_more">
                <div class="input_select_le_more_item">
                    <el-select
                        v-model="selectValue"
                        placeholder-style="color:#bfbfbf;font-size:7px;"
                        placeholder="请选择省" >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input_select_le_more_item">
                    <el-select
                        v-model="selectValue"
                        placeholder-style="color:#bfbfbf;font-size:7px;"
                        placeholder="请选择市" >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input_select_le_more_item">
                    <el-select
                        v-model="selectValue"
                        placeholder-style="color:#bfbfbf;font-size:7px;"
                        placeholder="请选择区" >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            
        </div>
        <div class="input_item">
          <div class="input_item_le">
            <span>邮箱</span>
          </div>
          <div class="input_item_ri">
            <el-input
              v-model="name"
              placeholder="请输入"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="14"
            />
          </div>
        </div>
        <div class="select_item">
          <div class="select_item_le">
            <span>参加工作时间</span>
          </div>
          <div class="select_item_ri">
            <el-date-picker
              v-model="date"
              :clearable="false"
              class="picker_popper"
              type="date"
              size="small"
              placeholder="请选择出生日期"
            />
            <img src="../../assets/login/13.png" alt="" />
          </div>
        </div>
        <div class="textarea_item">
            <div class="textarea_item_le">个人优势</div>
            <div class="textarea_item_ri">
                <el-input
                    v-model="name"
                    placeholder="请输入您的个人优势（50~200字）"
                    placeholder-style="color:#bfbfbf;font-size:7px;"
                    maxlength="200"
                    type="textarea"
                    resize="none"
                    />
            </div>
        </div>
        <div class="job_intention">求职意向</div>

        <div class="input_select">
            <div class="input_select_le">
                <span class="input_select_le_1">*</span>
                <span>期望职位</span>
            </div>
            <div class="input_select_ri">
                <el-select
                    v-model="selectValue"
                    placeholder-style="color:#bfbfbf;font-size:7px;"
                    placeholder="请选择" >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="input_select">
            <div class="input_select_le">
                <span>期望行业</span>
            </div>
            <div class="input_select_ri">
                <el-select
                    v-model="selectValue"
                    placeholder-style="color:#bfbfbf;font-size:7px;"
                    placeholder="请选择" >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="input_select">
            <div class="input_select_le">
                <span>工作城市</span>
            </div>
            <div class="input_select_le_more">
                <div class="input_select_le_more_item">
                    <el-select
                        v-model="selectValue"
                        placeholder-style="color:#bfbfbf;font-size:7px;"
                        placeholder="请选择省" >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input_select_le_more_item">
                    <el-select
                        v-model="selectValue"
                        placeholder-style="color:#bfbfbf;font-size:7px;"
                        placeholder="请选择市" >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input_select_le_more_item">
                    <el-select
                        v-model="selectValue"
                        placeholder-style="color:#bfbfbf;font-size:7px;"
                        placeholder="请选择区" >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
        </div>

        <div class="input_select">
            <div class="input_select_le">
                <span>工作城市</span>
            </div>
            <div class="input_select_le_more">
                <div class="more_item">
                    <div class="input_select_le_more_view">
                        <el-select
                            v-model="selectValue"
                            placeholder-style="color:#bfbfbf;font-size:7px;"
                            placeholder="请选择" >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="select_yuan">元</div>
                </div>
                <div>-</div>
                <div class="more_item">
                    <div class="input_select_le_more_view">
                        <el-select
                            v-model="selectValue"
                            placeholder-style="color:#bfbfbf;font-size:7px;"
                            placeholder="请选择" >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="select_yuan">元</div>
                </div>
            </div>
        </div>

        <div class="next_btn">下一步</div>

      </div>
    </div>
  </div>
  
  <!-- 页尾 -->
  <footerPage></footerPage>
</template>

<script name="improveResume" setup>
import { ref, reactive } from "vue";
import footerPage from "@/components/footerPage.vue";
components: {
    footerPage
}

let name = ref("");
let date = ref("");
let selectValue = ref('')

let options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: url(../../assets/login/10.png) no-repeat;
  background-size: 100% 100%;
  padding-top: 53px;
  padding-bottom: 29px;
}
.information {
  width: 720px;
  margin: 0 auto 0;
  height: 100%;
  background: #fff;
  padding: 0 16px 20px;
}
.tips {
  padding: 19px 0 13px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  .tips_1 {
    width: 2px;
    height: 10px;
    background: #1f52ae;
    margin-right: 5px;
  }
  .tips_2 {
    font-size: 10px;
    font-weight: 700;
  }
}
.steps {
  padding: 23.5px 0 28.5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .steps_item {
    display: flex;
    align-items: center;
    .steps_item_1 {
      width: 10px;
      height: 10px;
      background: rgba(255, 255, 255, 0.39);
      border-radius: 50%;
      border: 1px solid #79848f;
      font-size: 7px;
      font-weight: 500;
      color: #79848f;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .steps_item_2 {
      font-size: 9px;
      font-weight: 400;
      color: #79848f;
      margin-left: 5px;
    }
  }
  .active_steps_item {
    .steps_item_1 {
      border: 1px solid #1f52ae !important;
      color: #1f52ae !important;
    }
    .steps_item_2 {
      color: #1f52ae !important;
    }
  }
  .item_line {
    width: 65px;
    height: 1px;
    background: #9fa7b4;
    margin: 0 20px;
    position: relative;
    .item_line_1 {
      height: 1px;
      background: #1f52ae;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.form_container {
  width: 515px;
  margin: 0 auto 0;
  .head {
    display: flex;
    align-items: center;
    .head_le {
      width: 47px;
      font-size: 7px;
    }
    .head_ri {
      position: relative;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      .head_ri_icon {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 3px;
        bottom: 1px;
        z-index: 10;
      }
    }
  }
  .input_item {
    display: flex;
    align-items: center;
    margin-top: 12px;
    .input_item_le {
      width: 47px;
      font-size: 7px;
      .input_item_le_1 {
        color: #f43024;
      }
    }
    .input_item_ri {
      font-size: 7px !important;
      border-radius: 2px;
      border: 1px solid #e5e5e5;
      height: 20px;
      flex: 1;
    }
  }
  .select_1 {
    display: flex;
    align-items: center;
    margin-top: 12px;
    .select_1_le {
      width: 47px;
      font-size: 7px;
      .select_1_le_1 {
        color: #f43024;
      }
    }
    .select_2_le {
        width: 150px;
        font-size: 7px;
        .select_2_le_1 {
            color: #f43024;
        }
        .select_2_le_2 {
            font-size: 6px;
            color: #999;
        }
    }
    .select_1_ri {
      display: flex;
      align-items: center;
      .select_1_item {
        display: flex;
        align-items: center;
        margin-right: 15px;
        font-size: 7px;
        cursor: pointer;
        img {
          width: 7px;
          height: 7px;
          margin-right: 8px;
        }
      }
    }
  }
  .select_item {
    display: flex;
    align-items: center;
    margin-top: 12px;
    .select_item_le {
      width: 47px;
      font-size: 7px;
      .select_item_le_1 {
        color: #f43024;
      }
    }
    .select_item_ri {
      font-size: 7px !important;
      border-radius: 2px;
      border: 1px solid #e5e5e5;
      height: 20px;
      flex: 1;
      position: relative;

      img {
        width: 9px;
        height: 9px;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .input_select {
    display: flex;
    align-items: center;
    margin-top: 12px;
    .input_select_le {
        width: 47px;
        font-size: 7px;
        .input_select_le_1 {
            color: #f43024;
        }
    }
    .input_select_ri {
        font-size: 7px !important;
        border-radius: 2px;
        border: 1px solid #e5e5e5;
        height: 20px;
        flex: 1;
    }
    .input_select_le_more {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .input_select_le_more_item {
            font-size: 7px !important;
            border-radius: 2px;
            border: 1px solid #e5e5e5;
            height: 20px;
            width: 150px;
        }
        .input_select_le_more_view {
            font-size: 7px !important;
            border-radius: 2px;
            border: 1px solid #e5e5e5;
            height: 20px;
            width: 205px;
            display: flex;
            align-items: center;
            
        }
        .more_item {
            display: flex;
            align-items: center;
        }
        .select_yuan {
            font-size: 7px;
            margin-left: 6px;
        }
    }
  }
  .textarea_item {
    display: flex;
    margin-top: 12px;
    .textarea_item_le {
        width: 47px;
        font-size: 7px;
    }
    .textarea_item_ri {
        font-size: 7px !important;
        border-radius: 2px;
        border: 1px solid #e5e5e5;
        height: 61px;
        flex: 1;
    }
  }
  .job_intention {
    font-size: 12px;
    font-weight: 700;
    margin: 24px 0 20px;
  }
  .next_btn {
    width: 106px;
    height: 24px;
    border-radius: 3px;
    background: #1f52ae;
    font-size: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25.5px auto 0;
    cursor: pointer;
  }
}
</style>